<template>
    <div class="player">
    <div class="left">
        <!-- 注意这里的图片地址相对于Player.vue -->
      <img class='disc' src="../assets/img/disc.png" alt="">
      <img class='cover' :src="coverUrl" alt="">
    </div>
    <div class="right">
      <div class="title">
        <img src="../assets/img/tag.png" alt=""><span>{{songName}}</span> 
      </div>
      <div class="singer">歌手: <span>{{singers}}</span></div>
      <div class="album">所属专辑: <span>{{albumName}}</span></div>
      <audio class='audio' controls :src="musicUrl"></audio>
      <ul class='lyric-container'>
        <li class='lyric' v-for="(item,index) in lyric" :key="'song'+index">{{item}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      // 歌曲地址
      musicUrl:'',
      // 歌手名
      singers:'',
      // 歌手名集合
      singerNameList:[],
      // 封面
      coverUrl:'',
      // 专辑名
      albumName:'',
      // 歌名
      songName:'',
      // 歌词
      lyric:[],
    }
  },
  // fliter拼接歌手信息组合(废弃)
  filters:{
    // getSinger(singers){
    //   let tmpStr = ""
    //   singers.forEach(item=>{
    //     tmpStr += item.name;
    //     tmpStr += " | " 
    //   })
    //   // 截取最后一个的竖线
    //   tmpStr = tmpStr.slice(1,-2)
    //   return tmpStr;
    // }
  },
  // 生命周期初始化的时候调用
  async created(){
    if(!this.$router.history.current.params.id){
      alert("未传入id，请检查操作")
      window.history.back(-1)
      return
    }
    // console.log(this.$router.history.current.params.id+"player初始化")
    // 初始化信息
    this.musicUrl = "https://music.163.com/song/media/outer/url?id="+this.$router.history.current.params.id+'.mp3'

    // console.log(this.musicUrl)

    // axios发出请求获取封面
    // await this.$axios.get('/album?id='+this.$router.history.current.params.id)
     await this.$axios.get('/song/detail?ids='+this.$router.history.current.params.id)
    .then(backData=>{
      console.log("我要打印歌曲信息数据了")
      // console.log(backData)
      // 专辑图片
      this.coverUrl = backData.songs[0].al.picUrl
      console.log(this.coverUrl)
      this.albumName = backData.songs[0].al.name
      this.songName = backData.songs[0].name
      // 改为数组接收
      // this.singerName = backData.songs[0].ar[0].name
      // 拼接歌手名称
      this.singerNameList = backData.songs[0].ar
      // console.log(this.singerNameList)
      let tmpStr = ""
      this.singerNameList.forEach(item=>{
        tmpStr += item.name;
        tmpStr += " | " 
      })
      // 截取最后一个的竖线
      console.log(tmpStr)
      tmpStr = tmpStr.slice(0,-2)
      console.log(tmpStr)
      this.singers = tmpStr
      // conso.log(this.singers)

      //获取失败给默认信息
      console.log(this.coverUrl)
      if(this.coverUrl == ""){
        this.coverUrl = "https://p2.music.126.net/oSiXia-d5P7bN5r_VoSZQA==/109951168078939376.jpg"
      }
    })
    // 捕获错误用本地js数据
    .catch((err)=>{
        if(err){
          console.log("专辑信息获取失败了")
          this.coverUrl = "https://p2.music.126.net/oSiXia-d5P7bN5r_VoSZQA==/109951168078939376.jpg"
          this.albumName = "获取失败"
          this.songName = "获取失败"
          this.singers = "匿名歌手"
        }
      })


    //获取歌词
    await this.$axios.get('/lyric?id='+this.$router.history.current.params.id).then((backData)=>{
      // console.log("获取歌词")
      // console.log(backData)
      // 保存歌词为数组
      this.lyric = backData.lrc.lyric.split('\n');
      // console.log(this.lyric)
      // 循环数组切掉时间显示
      for(let i=0;i<this.lyric.length;i++){
        this.lyric[i] = this.lyric[i].slice(11)
      }
      //  console.log(this.lyric)
    })
  }
}
</script>
<!-- @表示相对于根标签-->
<style scoped>
    @import "@/assets/css/player.css"
</style>>
